<!doctype html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
  @keyframes anim {
    0% { opacity: 1.0; }
    100% { opacity: 1.0; }
  }

  #target { animation: anim 2s -1s linear paused; }
</style>
<div id="target"></div>
<script>
  test(function() {
    var sheet = document.styleSheets[0];
    var rules = sheet.rules;
    var keyframes = rules[0];

    assert_approx_equals(parseFloat(getComputedStyle(target).opacity), 1.0, 0.001, 'opacity');
    keyframes.appendRule('50% { opacity: 0.0; }');
    assert_approx_equals(parseFloat(getComputedStyle(target).opacity), 0.0, 0.001,  'opacity');

  }, "Check that changes to a compositor animation via CSSOM update it accordingly");
</script>
